import React, { Component, Fragment } from 'react';
import Debounce from 'lodash-decorators/debounce';
import Bind from 'lodash-decorators/bind';
import { connect } from 'dva';
import moment from 'moment';
import { routerRedux } from 'dva/router';
import { Button, Menu, Dropdown, Progress, Icon, Row, Col, Steps, Card, Popover, Badge, Table, Tooltip, Divider } from 'antd';
import classNames from 'classnames';
import DescriptionList from 'components/DescriptionList';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import styles from './AdvancedProfile.less';

const { Step } = Steps;
const { Description } = DescriptionList;
const ButtonGroup = Button.Group;

const getWindowWidth = () => (window.innerWidth || document.documentElement.clientWidth);

const operationTabList = [{
  key: 'tab1',
  tab: 'Damain',
}, {
  key: 'tab2',
  tab: 'Click',
}];

var cacu = function (record) {
  if (record.total_count == 0) {
    return 0
  }
  return parseInt(record.done_count / record.total_count * 100)
}



@connect(({ profile, loading }) => ({
  profile,
  loading: loading.effects['profile/fetchAdvanced'],
}))
export default class AdvancedProfile extends Component {
  state = {
    operationkey: 'tab1',
    open:true,
  }

  getQueryString(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
    var r = this.props.location.search.substr(1).match(reg);
    if (r != null) return unescape(r[2]); return null;
  }

  componentDidMount() {
    const { dispatch, task } = this.props;
    var task_id = this.getQueryString('task_id')
    dispatch({
      type: 'profile/fetchAdvanced',
      payload: {
        task_id: task_id,
      },
    });

  }

  onOperationTabChange = (key) => {
    this.setState({ operationkey: key });
  }

  openResult = (record) => {
    const { dispatch } = this.props;
    dispatch(routerRedux.push('/profile/basic?work_id=' + record.id));
    return
  }

  open = () => {
    this.setState({ open: !this.state.open });
  }

  render() {
    const columns = [
      { title: 'ID', dataIndex: 'id', key: 'id' },
      { title: '类型', dataIndex: 'work_type', key: 'work_type' },
      {
        title: '进度',
        key: 'state',
        render:
          (text, record, index) => (
            <div style={{ width: 170 }}>
              <Progress percent={cacu(record)} size="small"/>
              </div>)
      },

      {
        title: '更新时间', dataIndex: 'update_time', key: 'update_time',
        render: val => <span>{moment(val).format('YYYY-MM-DD HH:mm:ss')}</span>,
      },
      {
        title: '创建时间', dataIndex: 'create_time', key: 'create_time',
        render: val => <span>{moment(val).format('YYYY-MM-DD HH:mm:ss')}</span>,
      },
      {
        title: '操作',
        dataIndex: 'operation',
        key: 'operation',
        render: (val, record) => (
          <Fragment>
            <a onClick={() => this.openResult(record)}>查看收录</a>
          </Fragment>
        ),
      },
    ];


    const clickcolumns = [
      { title: 'ID', dataIndex: 'id', key: 'id' },
      { title: '类型', dataIndex: 'work_type', key: 'work_type' },
      {
        title: '进度',
        key: 'state',
        render:
          (text, record, index) => (
            <div style={{ width: 170 }}>
              <Progress percent={cacu(record)} size="small"/>
            </div>)
      },

      {
        title: '更新时间', dataIndex: 'update_time', key: 'update_time',
        render: val => <span>{moment(val).format('YYYY-MM-DD HH:mm:ss')}</span>,
      },
      {
        title: '创建时间', dataIndex: 'create_time', key: 'create_time',
        render: val => <span>{moment(val).format('YYYY-MM-DD HH:mm:ss')}</span>,
      }
    ];

    const { profile, loading } = this.props;
    const { damains, clicks, task } = profile;
    const contentList = {
      tab1: <Table
        pagination={false}
        loading={loading}
        dataSource={damains}
        columns={columns}
      />,
      tab2: <Table
        pagination={false}
        loading={loading}
        dataSource={clicks}
        columns={clickcolumns}
      />
    };

    var content;
    if(this.state.open){
      content = (
        <div>
          <Description className={styles.headerContent} term="域名">{task.content}</Description>
          <a className={styles.open} onClick={()=> this.open()}>展开</a>
        </div>
      )
    }else{
      content = (
        <div>
          <Description className={styles.headerList} term="域名">{task.content}</Description>
          <a className={styles.open} onClick={()=> this.open()}>关闭</a>
        </div>
      )
    }

    const description = (
      <div>
        <DescriptionList className={styles.headerList} size="small" col="2">
          <Description term="ID">{task.id}</Description>
          <Description term="执行次数">{task.retry}</Description>
          <Description term="是否点击">{task.isclick ? "是" : "否"}</Description>
          <Description term="优先级">{task.priority + ""}</Description>
          <Description term="创建时间">{moment(task.create_time).format('YYYY-MM-DD HH:mm:ss')}</Description>
          <Description term="更新时间">{moment(task.update_time).format('YYYY-MM-DD HH:mm:ss')}</Description>
          <Description term="MaxGroup">{task.click_max_group}</Description>
          <Description term="执行时间">{task.times}</Description>
        </DescriptionList>
        <DescriptionList size="small" col="1">
        {content}
        </DescriptionList>
      </div>
    );

    const extra = (
      <Row>
        <Col xs={24} sm={16}>
          <div className={styles.textSecondary}>状态</div>
          <div className={styles.heading}>{task.is_running ? '进行中' : '未运行'}</div>
        </Col>
      </Row>
    );
    var title = "任务：" + task.name
    return (
      <PageHeaderLayout
        title={title}
        logo={<img alt="" src="https://gw.alipayobjects.com/zos/rmsportal/nxkuOJlFJuAUhzlMTCEe.png" />}
        content={description}
        extraContent={extra}
      >

        <Card
          className={styles.tabsCard}
          bordered={false}
          tabList={operationTabList}
          onTabChange={this.onOperationTabChange}
        >
          {contentList[this.state.operationkey]}
        </Card>
      </PageHeaderLayout>
    );
  }
}
